<div class="pannel">
    <div class="pannel-head">
        <p>
            <span class="title">任务列表</span>
            <span class="count">任务数量(<i>86</i>), 执行中任务数量(<i>74</i>), 暂停任务数量(<i>35</i>)</span>
        </p>
        <button nz-button nzType="primary" nzShape="round"><i nz-icon type="plus"></i> 添加任务</button>
    </div>
    <div class="pannel-body">
        <div class="pannel-filter">
            <div class="pannel-filter-left">
                <nz-select style="width: 120px" [(ngModel)]="pages.type" nzAllowClear nzPlaceHolder="任务类型">
                    <nz-option nzValue="" nzLabel="全部任务类型"></nz-option>
                    <nz-option nzValue="T1" nzLabel="资产测绘"></nz-option>
                    <nz-option nzValue="T2" nzLabel="漏洞扫描"></nz-option>
                    <nz-option nzValue="T3" nzLabel="资产级漏洞扫描"></nz-option>
                </nz-select>
                <nz-select style="width: 120px" [(ngModel)]="pages.status" nzAllowClear nzPlaceHolder="任务状态">
                    <nz-option nzValue="" nzLabel="全部状态"></nz-option>
                    <nz-option nzValue="Pending" nzLabel="等待"></nz-option>
                    <nz-option nzValue="Executing" nzLabel="扫描中"></nz-option>
                    <nz-option nzValue="Suspended" nzLabel="暂停"></nz-option>
                    <nz-option nzValue="Finished" nzLabel="已完成"></nz-option>
                </nz-select>
                <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
            </div>
            <div class="pannel-filter-right">
                <nz-input-group [nzSuffix]="suffixIconSearch">
                    <input type="text" nz-input placeholder="请输入任务名或关键词" [(ngModel)]="pages.name" />
                </nz-input-group>
                <ng-template #suffixIconSearch>
                    <i nz-icon type="search"></i>
                </ng-template>
            </div>
        </div>
        <div>
            <nz-table class="pannel-body-table" #nzTable [nzData]="dataList" [nzShowPagination]="true" [nzLoading]="tableLoading" [nzFrontPagination]="false" [nzPageIndex]="pages.pageNo" [nzTotal]="pages.total" [nzPageSize]="pages.pageSize" [nzPageSizeOptions]="[10,20,30,40,50]" [nzShowQuickJumper]="true" [nzShowSizeChanger]="true" [nzShowTotal]="totalTemplate">
                <thead>
                    <tr>
                        <th>任务名称</th>
                        <th>范围</th>
                        <th>任务类型</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>任务描述</th>
                        <th>任务分类</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of nzTable.data">
                        <td>{{ data.name }}</td>
                        <td>{{ data.contactName }}</td>
                        <td>{{ data.type }}</td>
                        <td>{{ data.startTime }}</td>
                        <td>{{ data.endTime }}</td>
                        <td>{{ data.desc }}</td>
                        <td>{{ data.type2 }}</td>
                        <td>
                            <nz-tag *ngIf="data.status === 'Pending'" [nzColor]="'#87d068'">等待</nz-tag>
                            <nz-tag *ngIf="data.status === 'Executing'" [nzColor]="'#f50'">扫描中</nz-tag>
                            <nz-tag *ngIf="data.status === 'Suspended'" [nzColor]="'#f50'">暂停</nz-tag>
                            <nz-tag *ngIf="data.status === 'Finished'" [nzColor]="'#f50'">已完成</nz-tag>
                        </td>
                        <td><a (click)="updateUser(data)" style="margin-right: 8px;">修改</a><a>删除</a></td>
                    </tr>
                </tbody>
            </nz-table>
            <ng-template #totalTemplate let-total> 共{{ total }}条</ng-template>
        </div>
    </div>
</div>
